<template>
  <div class="list">
    <!-- 循环展示列表 -->
    <div
      class="left-list-col"
      v-for="item in formattedList"
      :key="item.id"
      v-infinite-scroll="loadMore"
      :infinite-scroll-immediate="false"
      :infinite-scroll-delay="200"
      :infinite-scroll-disabled="loading"
    >
      <div class="list-title">
        <div
          class="left-title"
          :style="{ width: item.status ? 'auto' : '100%' }"
        >
          <span>{{ item.type }}</span>
          <span>{{ item.date }}</span>
        </div>
        <div>
          <span :class="['workorder-status', item.statusClass]">
            {{ item.status }}
          </span>
        </div>
      </div>
      <div class="list-text" @click="handleClick(item.id)">
        {{ item.description }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { PropType } from 'vue';
import { FormattedItem } from '@/types/dashboard/updateLog'; // 引入类型定义
const emit = defineEmits(['handleClickItem']);

// Props 接收父组件传递的数据和方法
defineProps({
  formattedList: {
    type: Array as PropType<FormattedItem[]>,
    required: true,
  },
  loading: {
    type: Boolean,
    required: true,
  },
  loadMore: {
    type: Function,
    required: true,
  },
});

const handleClick = (id: string | number) => {
  emit('handleClickItem', id);
};
</script>

<style scoped src="./drawer.scss" lang="scss"></style>
